<!DOCTYPE html>
<html>

<head>
  <style>
    /* 清除默认样式 */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    /* 菜单容器 */
    ul {
      list-style-type: none;
      background-color: #333;
      text-align: center;
    }

    /* 一级菜单项目 */
    ul li {
      display: inline-block;
      position: relative;
    }

    ul li a {
      color: white;
      text-decoration: none;
      display: block;
      padding: 15px 20px;
    }

    /* 二级菜单容器 */
    ul li ul {
      display: none;
      position: absolute;
      background-color: #555;
      min-width: 160px;
      z-index: 1;
    }

    /* 二级菜单项目 */
    ul li ul li {
      display: block;
    }

    /* 鼠标悬停显示二级菜单 */
    ul li:hover ul {
      display: block;
    }
  </style>
</head>

<body>
  <ul>
    <li><a href="#">奶茶</a>
      <ul>
        <li><a href="#">布蕾脆脆奶芙</a></li>
        <li><a href="#">小麦青汁加青稞</a></li>
        <li><a href="#">草莓奶砖</a></li>
      </ul>
    </li>
    <li><a href="#">水果</a>
      <ul>
        <li><a href="#">榴莲</a></li>
        <li><a href="#">芒果</a></li>
        <li><a href="#">丑橘</a></li>
      </ul>
    </li>
    <li><a href="#">雪糕</a>
      <ul>
        <li><a href="#">冠军小白</a></li>
        <li><a href="#">巧乐兹</a></li>
        <li><a href="#">旺旺碎冰冰</a></li>
      </ul>
    </li>
  </ul>
</body>

</html>